<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>小米商城-个人信息</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<link rel="stylesheet" type="text/css" href="css/alert.css">
	<link rel="stylesheet" type="text/css" href="./admin/css/bootstrap.css">
	<style type="text/css">
		.info_inp{
			background-color: #f9f9f9;
			border: none;
		}
		.modify_btn{
			width: 160px;/*设置按钮宽度*/
			height: 30px;/*设置按钮高度*/
			color:white;/*字体颜色*/
			background-color:cornflowerblue;/*按钮背景颜色*/
			border-radius: 3px;/*让按钮变得圆滑一点*/
			border-width: 0;/*消去按钮丑的边框*/
			margin: 0;
			outline: none;/*取消轮廓*/
			font-family: KaiTi;/*字体设置为楷体*/
			font-size: 17px;/*设置字体大小*/
			text-align: center;/*字体居中*/
			cursor: pointer;/*设置鼠标箭头手势*/
		}
	</style>
</head>

<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
				<c:if test="${empty user}">
					<div class="login_btn fl">
						<a href="login.jsp">登录</a>
						<span>|</span>
						<a href="register.jsp">注册</a>
					</div>
				</c:if>
				<c:if test="${not empty user}">
					<div class="login_info fl" style="display:block">
						欢迎您：<em>${user.uname}</em>
					</div>
				</c:if>	
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.jsp">用户中心</a>
					<span>|</span>
					<a href="gouwuche.jsp">我的购物车</a>
					<span>|</span>
					<a href="user_center_order.jsp?page=1">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="index.jsp" class="logo fl"><img src="image/logo_top.png" style="width:80px;"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
				
	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user_center_info.jsp" class="active">· 个人信息</a></li>
				<li><a href="user_center_order.jsp?page=1">· 全部订单</a></li>
				<li><a href="user_center_site.jsp">· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
			<div class="info_con clearfix">
				<h3 class="common_title2">基本信息</h3>
					<ul class="user_info_list" style="height: 200px;">
						<li><span>用户名：</span><input class="info_inp" readonly="readonly" id="uname" value="${user.uname }"></li>
						<li><span>密&nbsp;&nbsp;&nbsp;&nbsp;码：</span><input class="info_inp" readonly="readonly" id="pwd" value="${user.pwd }"></li>
						<li><span>支付密码：</span><input class="info_inp" readonly="readonly" id="paypwd" value="${user.paypwd}" maxlength="6"></li>
						<li><span>联系方式：</span><input class="info_inp" readonly="readonly" id="tel" value="${user.tel }"></li>
						<li><input class="modify_btn" id="modify_btn" type="button" value="修改信息" onclick="modify('${user.uid}','${user.uname}','${user.pwd}','${user.paypwd}','${user.tel}')" style="margin-top:30px;"></li>
					</ul>
			</div>
			<div class="info_con clearfix" style="margin-top:30px;">
				<h3 class="common_title2">账户信息</h3>
				<div class="user_info_list">
					<table class="table table-bordered" style="width:300px; margin-left:50px;">
						<tr align="center">
							<td>支付方式</td>
							<td>余额</td>
							<td>充值</td>
						</tr>
						<c:forEach var="paytype" items="${payType}" varStatus="i">
							<tr align="center">
								<td id="type">${paytype.ptype}</td>
								<td>${paytype.money}</td>
								<td><input type="button" readonly="readonly" onclick="addMoney(this)" value="充值"></td>
							</tr>
						</c:forEach>
						
					</table>
				</div>
				
			</div>	
		</div>
	</div>
	
	<footer class="mt20 center">			
		<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
		<div>?mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
		<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
	</footer>
	
	<!-- 弹框部分代码 -->
	<div class="popOutBg"></div>
	<div class="popOut" style="height: 360px;">
		<span title="关闭"> X </span>
		<table>
			<caption>请输入需要修改的内容</caption>
			<input id="modify_uid" type="hidden" value="">
			<tr>
				<td width="120">用户名：</td>
				<td><input id="modify_uname" type="text" class="inp" value="" /></td>
			</tr>
			<tr>
				<td width="120">密码：</td>
				<td><input id="modify_pwd" type="password" class="inp" value="" /></td>
			</tr>
			<tr>
				<td width="120">支付密码：</td>
				<td><input id="modify_paypwd" type="password" class="inp" value="" maxlength="6"/></td>
			</tr>
			<tr>
				<td width="120">联系方式：</td>
				<td><input id="modify_tel" type="text" class="inp" value="" /></td>
			</tr>
			<tr>
				<td colspan="2"><input style="margin-top: 0px;" type="button" id="modify_sub"
					class="change_submit" value="提 交" /></td>
			</tr>
		</table>
	</div>

	
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
	if( $(".login_btn").html() ){
		//提示用户先登录
		alert("请先登录");
		location.href="login.jsp";
	}
	
	//修改的点击事件	对话框的显示隐藏
	function modify(uid,uname,pwd,ppwd,tel){
		$("#modify_uid").val(uid);
		$("#modify_uname").val(uname);
		$("#modify_pwd").val(pwd);
		$("#modify_paypwd").val(ppwd);
		$("#modify_tel").val(tel);
		show(".popOut").style.display = "block";
		ani();
		show(".popOutBg").style.display = "block";
		function ani(){
			show(".popOut").className = "popOut ani";
		}
		$(".popOut > span").click(function(){
			show(".popOut").style.display = "none";
			show(".popOutBg").style.display = "none";
		});
	}
	//显示修改对话框
	function show(param){
		if(arguments[1] == true){
			return document.querySelectorAll(param);
		}else{
			return document.querySelector(param);
		}
	}
	
	$("#modify_sub").click(function () {
		var uid = $("#modify_uid").val();
		var uname = $("#modify_uname").val();
		var pwd = $("#modify_pwd").val();
		var paypwd=$("#modify_paypwd").val();
		//console.log(paypwd);
		var tel = $("#modify_tel").val();
		if( uname == null || uname == "" ){
			alert("用户名不可为空！");
			$("#modify_uname").focus();
			return;
		}
		if( pwd == null || pwd == "" ){
			alert("密码不可为空！");
			$("#modify_pwd").focus();
			return;
		}
		if( tel == null || tel == "" ){
			alert("联系方式不可为空！");
			$("#modify_tel").focus();
			return;
		}if( paypwd == null || paypwd == "" || paypwd.lenght<6 ){
			alert("支付密码不可为空并且密码长度不能少于6");
			$("#modify_paypwd").focus();
			return;
		}
		console.log(1231);
		$.post("userServlet",{
			op:'user_modify',
			uid:uid,
			uname:uname,
			pwd:pwd,
			paypwd:paypwd,
			tel:tel
		},function(data){
			if(data>0){
				alert("修改成功!");
				location.reload();
			}else{
				alert("修改失败!");
			}
		});
	});
		
		//充值
		function addMoney(that){
			var price=prompt("请输入你需要充值的金额:");
			if(price<100){
				alert("充值金额不能少于100");
			}
			//获取充值的是什么充值方式
			var paytype=$(that).parent().parent().find("#type").html();
			//console.log(paytype);
			//发送ajax请求修改数据库
			$.post("payTypeServlet",{
				op:"updateMoney",
				price:price,
				paytype:paytype
			},function(data){
				if(data>0){
					alert("充值成功");
					location.reload();
				}else{
					alert("网络异常...稍后再试");
				}
			},"text");
		}
	</script>
	
</body>
</html>